<template>
	<section class="todoapp">
		<mvc-top @add="add"></mvc-top>
		<mvc-list :todoArr="todaList" @complete="toggole" @del="del" @selectAll="selectAll"></mvc-list>
		<mvc-btm :sum="sum" @clear="clear" @screening="screening"></mvc-btm>
	</section>
</template>

<script>
	import MvcTop from "./top.vue"
	import MvcList from "./list.vue"
	import MvcBtm from "./btm.vue"
	export default{
		name:"Home",
		components:{MvcTop,MvcList,MvcBtm},
		methods:{
			toggole(item){
				item.completed = !item.completed
				this.reset()
			},
			del(id){
				var index = this.allList.findIndex(item=>{return item.id==id})
				this.allList.splice(index,1)
				this.reset()
			},
			add(value){
				var id = this.allList.length > 0 ? this.allList[0].id+1 : 1
				if(value!=""){
					this.allList.unshift({
						id:id,
						title:value,
						completed:false
					})
				}
				this.reset()
			},
			clear(){
				this.allList = this.allList.filter(item=>item.completed==false)
				this.reset()
			},
			screening(index){
				if(index==0){
					this.todaList=this.allList
				}
				if(index==1){
					this.todaList=this.allList.filter(item=>item.completed==false)
				}
				if(index==2){
					this.todaList=this.allList.filter(item=>item.completed==true)
				}
				this.status = index
			},
			selectAll(select){
				for(var i in this.allList)this.allList[i].completed=select
				this.reset()
			},
			reset(){
				this.todaList = this.allList.filter(item=>{
					if(this.status==0) return true 
					if(this.status==1) return item.completed==false
					if(this.status==2) return item.completed==true
				})
				localStorage.setItem("allList",JSON.stringify(this.allList))
			}
		},
		data(){
			return{
				allList:[
					// {id:1,title:'吃',completed:true},
					// {id:2,title:'喝',completed:true},
					// {id:3,title:'拉',completed:false},
					// {id:4,title:'撒',completed:true},
					// {id:5,title:'睡',completed:false}
				],
				todaList:[
					
				],
				status:0
			}
		},
		created(){
			this.allList = JSON.parse(localStorage.getItem("allList")) || []
			this.todaList = this.allList
		},
		computed:{
			sum(){
				return this.todaList.length
			}
		}
	}
</script>

<style>
</style>
